import React from 'react';
import { ColumnsType, ColumnType } from 'antd/lib/table'
// import {FormInstance} from 'antd/lib/form/hooks/useForm.d';
import { Drawer, Form, Input, Button } from 'antd';
interface State { form: {}, FormItem: [] }
interface Props<T> {
    elem?: T,
    onClose?: () => void,
    visible?: boolean,
    updateOne?: (element: T) => void,
    formRef?: React.RefObject<any>,
    datas?: ColumnsType<T>
}
class UpdateDrawer<T> extends React.Component<Props<T>, State> {
    constructor(props: Props<T>) {
        super(props);
        // 不要在这里调用 this.setState()
        this.state = { form: {}, FormItem: [] };
    }
    updateHandler(element: T) {
        let fieldValues: T = this.props.formRef?.current.getFieldsValue();
        console.log(fieldValues);
        var prog: T = fieldValues;
        if (this.props.updateOne != undefined) {
            this.props.updateOne(prog);
        }
    }
    // getSnapshotBeforeUpdate(prevProps: Props<T>, prevState: State) {
    //     // this.InitHandler();
    // }
    render() {
        return (
            <Drawer title="更新"
                placement="right"
                onClose={this.props.onClose}
                visible={this.props.visible}
                getContainer={false}
                forceRender
            >
                <Form name="global_state"
                    layout="inline"
                    // form={form}
                    ref={this.props.formRef}
                >
                    {
                        this.props.datas?.map((c, i) => {
                            return <Form.Item
                                key={i}
                                label={c.title}
                                name={(c as ColumnType<T>).dataIndex?.toString()}>
                                <Input />
                            </Form.Item>
                        })
                    }
                    <div>
                        <Button onClick={() => { this.updateHandler(this.props.elem!) }}>提交</Button>
                        <Button onClick={this.props.onClose}>取消</Button>
                    </div>
                </Form>
            </Drawer>);
    }
}
export default UpdateDrawer;